<template>
  <vue-chart :options="options" />
</template>

<script setup>
import { ref, reactive, watchEffect, onMounted } from "vue";
import * as echarts from "echarts";
import VueChart from "@/components/VueChart.vue";

// 创建图表实例配置
const options = ref({});

// 图表数据配置
const chartData = reactive({
  xAxis: [], // x轴刻度值
  series: {
    lastYear: [], // 去年数据
    thisYear: [], // 今年数据
  },
});

// 颜色配置
const colors = {
  lastYear: {
    color: "#00ECB3",
    top: "#73FFDD",
    bottom: "#04B88D",
  },
  thisYear: {
    color: "#009ED0",
    top: "#80E0FF",
    bottom: "#006D8F",
  },
};

// 图表基础配置
const baseOptions = {
  tooltip: {
    trigger: "item",
    padding: 10,
  },
  grid: {
    left: "7.5%",
    top: "10%",
    right: "0%",
    bottom: "10%",
  },
  xAxis: [
    {
      type: "category",
      axisLabel: {
        textStyle: {
          color: "#C5D6E9",
          fontSize: 10,
        },
        margin: 10,
      },
      axisLine: {
        show: true,
        lineStyle: {
          type: "solid",
          color: "#ABCCFF",
        },
      },
      axisTick: {
        show: false,
      },
      boundaryGap: true,
      splitLine: {
        show: false,
        width: 0.08,
        lineStyle: {
          type: "solid",
          color: "#03202E",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "#ABCCFF",
          type: "dashed",
          opacity: 0.2,
        },
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        show: true,
      },
      axisLabel: {
        textStyle: {
          color: "#C5D6E9",
          fontSize: 10,
        },
      },
    },
  ],
};

/**
 * 获取柱状图组合配置（包含柱体和装饰）
 * @param {string} name - 系列名称
 * @param {number[]} data - 系列数据
 * @param {Object} colors - 颜色配置
 * @param {number} offset - 偏移量
 * @returns {Array} 柱状图组合配置数组
 */
const getBarGroupConfig = (name, data, colors, offset) => [
  // 柱底圆片
  {
    name: "",
    type: "pictorialBar",
    symbolSize: [12, 5],
    symbolOffset: [offset, 2],
    z: 12,
    itemStyle: {
      color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
        { offset: 0, color: colors.bottom },
        { offset: 1, color: colors.bottom },
      ]),
    },
    data,
  },
  // 柱体
  {
    name: "",
    type: "bar",
    barWidth: 12,
    barGap: offset === -7 ? "0%" : "20%",
    itemStyle: {
      color: {
        type: "radial",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: colors.color },
          { offset: 1, color: colors.color },
        ],
        global: false,
      },
    },
    data,
  },
  // 柱顶圆片
  {
    name: "",
    type: "pictorialBar",
    symbolSize: [12, 5],
    symbolOffset: [offset, -2],
    z: 12,
    symbolPosition: "end",
    itemStyle: {
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: colors.top },
          { offset: 1, color: colors.top },
        ],
        false
      ),
    },
    data,
  },
];

// 监听数据变化，更新图表配置
watchEffect(() => {
  options.value = {
    ...baseOptions,
    xAxis: [
      {
        ...baseOptions.xAxis[0],
        data: chartData.xAxis,
      },
    ],
    series: [
      // 去年的柱状图组
      ...getBarGroupConfig(
        "去年",
        chartData.series.lastYear,
        colors.lastYear,
        -7
      ),
      // 今年的柱状图组
      ...getBarGroupConfig(
        "今年",
        chartData.series.thisYear,
        colors.thisYear,
        7.5
      ),
    ],
  };
});

// 模拟异步数据加载
onMounted(async () => {
  try {
    // 这里可以替换为实际的接口调用
    const mockData = {
      xAxis: ["1号线", "2号线", "3号线", "4号线"],
      lastYear: [150, 300, 350, 280],
      thisYear: [550, 800, 850, 280],
    };

    chartData.xAxis = mockData.xAxis;
    chartData.series.lastYear = mockData.lastYear;
    chartData.series.thisYear = mockData.thisYear;
  } catch (error) {
    console.error("加载数据失败:", error);
  }
});
</script>

<style scoped></style>
